<template>
  <div class="number-select-tab">
    <main-tabbar
      @click="updateMainIndex" 
      :options="options"
      :currentMainIndex="currentMainIndex"
    ></main-tabbar>
    <sub-tabbar
      :currentMainTab="currentMainTab"
      @click="undateActiveSubIndex"
    ></sub-tabbar>
  </div>
</template>

<script>
import MainTabbar from '@/components/base/main-tabbar/main-tabbar'
import SubTabbar from '@/components/base/sub-tabbar/sub-tabbar'
import { mapMutations } from 'vuex'
export default {
  components: {
    MainTabbar,
    SubTabbar
  },
  props: {
    options: {
      type: Array,
      require: true
    }
  },
  data() {
    return {
      // 当前选中父标index
      currentMainIndex: 0,
    }
  },
  created() {
    this.setCurrentMainTab({mainTabName: this.currentMainTab.context, id: this.currentMainTab.id})
  },
  methods: {
    updateMainIndex(index) {
      this.currentMainIndex = index
      this.setCurrentMainTab({mainTabName: this.currentMainTab.context, id: this.currentMainTab.id})
    },
    // 将currentSubId设置为点击的按钮的index
    undateActiveSubIndex(subTab, id, component) {
      let clonedOptions = JSON.parse(JSON.stringify(this.options))
      let clonedMainTab = clonedOptions[this.currentMainIndex]
      clonedMainTab.currentSubId = id
      clonedMainTab.currentSubTab = subTab
      clonedMainTab.currentComponent = component
      // 更改父组件options数据
      this.$emit('mutate', clonedOptions)
    },
    ...mapMutations('lottery', {
      setCurrentMainTab: 'SET_CURRENT_MAIN_TAB'
    })
  },
  computed: {
    //当前父级标签
    currentMainTab() {
      return this.options[this.currentMainIndex]
    },
  }
}
</script>